<template>
    <div class="q">
    <h5>解放8号</h5>
    <div class="e">
        <input type="text" name="" id="" placeholder="盒马电子卡">
    </div>
    <div class="b">
        <img src="../images/01.png" alt="">
    </div>
    <div class="c">
        <ul>
            <li>
                <img src="../images/02.png" alt="">
                <span>时令水果</span>
            </li>
            <li>
                <img src="../images/02.png" alt="">
                <span>时令水果</span>
            </li>
            <li>
                <img src="../images/02.png" alt="">
                <span>时令水果</span>
            </li>
            <li>
                <img src="../images/02.png" alt="">
                <span>时令水果</span>
            </li>
            <li>
                <img src="../images/02.png" alt="">
                <span>时令水果</span>
            </li>
            <li>
                <img src="../images/02.png" alt="">
                <span>时令水果</span>
            </li>
            <li>
                <img src="../images/02.png" alt="">
                <span>时令水果</span>
            </li>
            <li>
                <img src="../images/02.png" alt="">
                <span>时令水果</span>
            </li>
            <li>
                <img src="../images/02.png" alt="">
                <span>时令水果</span>
            </li>
            <li>
                <img src="../images/02.png" alt="">
                <span>时令水果</span>
            </li>
        </ul>
    </div>
    <div class="z">
        <span>受全国多地疫情管控影响，部分订单可能会延迟</span>
    </div>
    <div class="a">
<img src="../images/03.png" alt="">
    </div>
    <div class="b">
        <ul>
            <li>
                <img src="../images/04.png" alt="">
            </li>
            <li>
                <img src="../images/04.png" alt="">
            </li>
        </ul>
    </div>
    <div class="d">
        <ul>
            <li>
                <img src="../images/04.png" alt="">
            </li>
            <li>
                <img src="../images/04.png" alt="">
            </li>
        </ul>
    </div>
    </div>
</template>

<script>

</script>

<style lang="scss" scoped>
.q{
  
    width: 100%;
    height: 400px;
    background-color: #F5A44B;
    h5{
        color: white;
        font-size: 25px;
    }
    .e{
        display: flex;
        height: 50px;
        justify-content: center;
        background-color: rgb(238, 179, 18);
        input{
            width: 600px;
            border-radius: 50px;
            border: none;
        }
    }
    .b{
        display: flex;
        height: 300px;
        background-color: crimson;
        img{
            width: 100%;
            
        }
    }
    .c{
        display: flex;
        width: 100%;
        height: 400px;
        background-color: rgb(244, 246, 249);
        span{
            margin-top: 10px;
            justify-content: center;
            display: flex;
            font-size: 20px;
        }
        img{
          justify-content: center;
        }
        ul{
            flex-wrap: wrap;
            display: flex;
           margin-left: 20px;
        }
    }
    .z{
        display: flex;
        height: 60px;
        background-color: #FFF7EC;
        span{
            display: flex;
            font-size: 30px;
        }
    }
    .a{
        display: flex;
        height: 400px;
        background-color: rgb(244, 238, 236);
        img{
            height: 400px;
        }
    }
    .b{
        display: flex;
        height: 280px;
        background-color: rgb(240, 246, 246);
        ul{
           
            display:flex;
        }
      li{
        img{
           
            width: 370px;
        }
      }
       
    }
    .d{
        display: flex;
        height: 280px;
        background-color: rgb(247, 253, 253);
        ul{
           
            display:flex;
        }
      li{  
        img{
           
            width: 370px;
        }
      }
    }
}

</style>